<template>
	<view>
		<view style="display: flex; justify-content:space-between">
			<u-button type="primary" text="修改信息" v-if="user.Roles.indexOf('车辆管理员')!=-1" @click="toChange"></u-button>
			<u-button type="success" text="用车记录" @click="toApply"></u-button>
			<u-button type="success" text="车辆保险" @click="toInsurance" color="#ffb980"></u-button>
			<u-button type="success" text="保养维修" @click="toMaintenance" color="#61a0a8"></u-button>
		</view>
		<u-collapse ref='coll' :value="['1','2']">
			<u-collapse-item name="1" title="车辆信息" icon="order">
				<u-cell-group>
					<u-cell title="名称" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Name}}</span>
					</u-cell>
					<u-cell title="厂家" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Factory || " "}}</span>
					</u-cell>
					<u-cell title="型号" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Model || " "}}</span>
					</u-cell>
					<u-cell title="车牌号" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.CarNo || " "}}</span> 
					</u-cell>
					<u-cell title="车辆所属" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Affiliation || " "}}</span> 
					</u-cell>
					<u-cell title="车架号" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Vin || " "}}</span> 
					</u-cell>
					<u-cell title="发动机号" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.EngineNo || " "}}</span> 
					</u-cell>
					<u-cell title="购买日期" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.BuyTime || " "}}</span>
					</u-cell>
					<u-cell title="状态" :use-label-slot="true">
						<span slot="label" class="cell-label" :style="{'color': (carData.Status == '空闲' ? 'green' : 'red' )}">{{carData.Status || " "}}</span>
					</u-cell>
					<u-cell title="颜色" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Color || " "}}</span>
					</u-cell>
					<u-cell title="备注" :use-label-slot="true">
						<span slot="label" class="cell-label">{{carData.Remark || " "}}</span>
					</u-cell>
				</u-cell-group>
			</u-collapse-item>
			<u-collapse-item name="2" title="车辆整体照" icon="https://project.gxrunxiang.com/cdn/image.png">
				<u-album :urls="imagesurls1"></u-album>
			</u-collapse-item>
			<u-collapse-item name="2" title="车架号照" icon="https://project.gxrunxiang.com/cdn/image.png">
				<u-album :urls="imagesurls2"></u-album>
			</u-collapse-item>
			<u-collapse-item name="2" title="行驶证照" icon="https://project.gxrunxiang.com/cdn/image.png">
				<u-album :urls="imagesurls3"></u-album>
			</u-collapse-item>
		<u-button type="error" :plain="true" v-if="user.Roles.indexOf('车辆管理员')!=-1"
			@click="delmodalShow = true">删除</u-button>
		</u-collapse>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="delmodalShow" title="提示" content='确认删除?' @confirm="del" :showCancelButton="true"
			confirmText="是" cancelText="否" @cancel="delmodalShow = false" :closeOnClickOverlay="true"
			@close="delmodalShow = false"></u-modal>
	</view>
</template>
<script>
	import {
		baseUrl
	} from '@/common/config.js'
	import flowtool from "../c_flowtool.vue"
	import {
		mapGetters
	} from 'vuex'
	import {
		getcarlist,
		getfilebyoutid,
		delcar
	} from '@/common/api.js'
	export default {
		components: {
		  flowtool
		},
		data() {
			return {
				carId: "",
				carData: [],
				imagesurls1: [],
				imagesurls2: [],
				imagesurls3: [],
				modalShow: false,
				delmodalShow: false,
				user: {}
			}
		},
		onLoad(option) {
			this.user = JSON.parse(uni.getStorageSync("$userinfo"))
			this.carId = option.Id	
		},
		onShow(){
			this.getlist(this.carId)
		},
		methods: {
			async getlist(id) {
				let para = {
					Parameters: [],
				}
				para.Parameters.push({
					FieldName: "Id",
					ConditionalType: "Equal",
					FieldValue: id
				})
				console.log(para);
				await getcarlist(para).then(res => {
					this.carData = res.data[0]
				})
				this.imagesurls1 = []
				this.imagesurls2 = []
				this.imagesurls3 = []
				getfilebyoutid(this.carId).then(res => {
					for (var i = 0; i < res.length; i++) {
						if (res[i].MyType == '车辆整体照') {
							this.imagesurls1.push(`${baseUrl}/SysFile/download?id=${res[i].Id}`)
						}
						if (res[i].MyType == '车架号照') {
							this.imagesurls2.push(`${baseUrl}/SysFile/download?id=${res[i].Id}`)
						}
						if (res[i].MyType == '行驶证照') {
							this.imagesurls3.push(`${baseUrl}/SysFile/download?id=${res[i].Id}`)
						}
					}
					setTimeout(() => {
							this.$refs.coll.init()
						},
						1000)
				})
			},
			del(){
				let ids = []
				ids.push(this.carId)
				delcar(ids).then((res) => {
					if (res == true)
						uni.navigateBack()
				})
			},
			toChange(){
				uni.navigateTo({
					url: "addcar?Id=" + this.carId
				})
			},
			toApply(){
				uni.navigateTo({
					url: "applylist?Id=" + this.carId
				})
			},
			toInsurance(){
				uni.navigateTo({
					url: "carinsurance?Id=" + this.carId
				})
			},
			toMaintenance(){
				uni.navigateTo({
					url: "carmaintenance?Id=" + this.carId
				})
			}
		}
	}
</script>
<style>
	.cell-label {
		margin-top: 10px;
		font-size: 14px;
		color: #909193;
	}
</style>